import { View } from "@tarojs/components";
import styles from "./index.module.scss";
import Hobbies from "./ Hobbies";
import { useState } from "react";
import { AtButton } from "taro-ui3";
import Taro from "@tarojs/taro";
const Welcome = () => {
  const [hobbies, setHobbies] = useState<any[]>([
    {
      id: 1,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 2,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 3,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 4,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 5,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 6,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 7,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 8,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 9,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 10,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id:11,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 12,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
    {
      id: 13,
      url: "https://img.yzcdn.cn/vant/cat.jpeg",
      label: '音乐',
      type: 'music'
    },
  ]);
  

  const submit = () => {
    console.log(hobbies);
    Taro.navigateTo({url: '/welcome/pages/FollowLabels' })
  };
  return (
    <View  className={styles["user-hoppy-container"]}>
      <View>
        <View className={styles["title"]}>欢迎回来</View>
        <View className={styles["sub-title"]}>选择您感兴趣的类别</View>
      </View>
      <Hobbies hobbites={hobbies} />
      <AtButton className={styles["submit-btn"]} onClick={submit}>
        确定
      </AtButton>
    </View>
  );
};

export default Welcome;
